<!doctype html>
<html class="no-js ">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Amaze UI Admin index Examples</title>
		<meta name="description" content="这是一个 index 页面">
		<meta name="keywords" content="index">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="assets/i/favicon.png">
		<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="stylesheet" href="assets/css/amazeui.css" />
		<link rel="stylesheet" href="assets/css/admin.css">
		<script src="assets/js/jquery.min.js"></script>
		<script type="text/javascript" src="assets/js/amazeui.min.js"></script>
		<style>
			.line-tips{
				line-height: 32px;
			}
		  #vld-tooltip {
		    position: absolute;
		    z-index: 1000;
		    padding: 5px 10px;
		    background: #F37B1D;
		    min-width: 150px;
		    color: #fff;
		    transition: all 0.15s;
		    box-shadow: 0 0 5px rgba(0,0,0,.15);
		    display: none;
		  }
		
		  #vld-tooltip:before {
		    position: absolute;
		    top: -8px;
		    left: 50%;
		    width: 0;
		    height: 0;
		    margin-left: -8px;
		    content: "";
		    border-width: 0 8px 8px;
		    border-color: transparent transparent #F37B1D;
		    border-style: none inset solid;
		  }
		</style>
	</head>

	<body style="background-color: #f5f5f5;">

		<div class="am-g" style="max-width: 1100px;">
			<header class="am-topbar admin-header topbar-color headerbg" style="margin-bottom: 10%;">
				<div class="am-topbar-brand">
					<strong><img src="assets/images/logo2.png">	</strong>

				</div>

			</header>

			<div class="am-g ">
				<form class="am-u-sm-12 am-u-md-5 am-u-lg-centered am-padding-lg am-form" style="" id="form-with-tooltip">
					<fieldset>

						<div class="am-form-group">
							<label for="doc-vld-name-2-0">帐号：</label>
							<input class="am-radius" type="text" id="doc-vld-name-2-0" minlength="3" placeholder="输入用户名（至少 3 个字符）" required/>
						</div>

						<div class="am-form-group">
							<label for="doc-vld-pwd-1-0">密码：</label>
							<input class="am-radius" type="password" id="doc-vld-pwd-1-0" placeholder="请输入密码" pattern="^\d{6}$" required data-foolish-msg="请输入密码" />
						</div>
						<div class="am-form-group">
							<label for="doc-vld-email-2-1">邮箱：</label>
							<input type="email" id="doc-vld-email-2-1" data-foolish-msg="自定义提示信息：" placeholder="输入邮箱" required/>
						</div>
						<div class=" am-u-sm-12 am-margin-bottom-sm">
							<button type="submit" class="am-btn am-btn-success am-radius am-btn-block">提交</button>
						</div>
						
					</fieldset>
				</form>
			</div>

		</div>
		<footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }" style="position: fixed;bottom: 0;width: 100%;">

			<div class="am-footer-miscs">
				<p>由 <a href="http://www.yunshipei.com/" title="诺亚方舟" target="_blank" class="">学点网络</a> 提供技术支持</p>
				<p>CopyRight©2014 wuhanxd Inc.</p>
			</div>
	</body>
	<script language="JavaScript">
		$(function() {
		  var $form = $('#form-with-tooltip');
		  var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
		  $tooltip.appendTo(document.body);
		
		  $form.validator();
		
		  var validator = $form.data('amui.validator');
		
		  $form.on('focusin focusout', '.am-form-error input', function(e) {
		    if (e.type === 'focusin') {
		      var $this = $(this);
		      var offset = $this.offset();
		      var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));
		
		      $tooltip.text(msg).show().css({
		        left: offset.left + 10,
		        top: offset.top + $(this).outerHeight() + 10
		      });
		    } else {
		      $tooltip.hide();
		    }
		  });
		});
	</script>

</html>